﻿<html>

<head>
  <meta charset="utf-8">
  <title>aggrolist</title>
  <link rel="stylesheet" href="css/aggrolist.css">
</head>

<body id="aggrolist" v-class="resize-handle: !locked">

  <!-- outer -->
  <div class="outer {{hide ? 'hide' : ''}}">
    <!-- innner -->
    <div v-if="updated" class="inner">
      <div class="background"></div>

      <!-- Combatants Table -->
      <table id="combatants" v-show="!collapsed">
        <!-- Table Header -->
        <thead class="gold">
          <tr>
            <th class="text-center" >Hate</th>
            <th class="test-center" >Target</th>
            <th class="text-left">Name</th>
            <th class="text-right" style="padding-right: 4px">HPP</th>
          </tr>
        </thead>
        <!-- Table Body -->
        <tbody class="blue">
          <!-- Vue Repeat Template -->
          <template v-repeat="combatant: combatants">
            <tr class="{{combatant.isCurrentTarget ? '' : ''}}">
              <!-- Hate -->
              <td class="hate text-right">
                <div class="hate {{combatant.hatecolor}}"><span style="position:absolute; left:12px;">{{combatant.isCurrentTarget ? "▶" : ""}}</span><span>{{combatant.HateRate}}%</span></div>
              </td>
              <!-- Target -->
              <td class="target text-center">
                <div class="target {{combatant.Target | jobrole}}">{{combatant.Target.isMe ? "YOU" : combatant.Target.isPet ? "PET" : combatant.Target.JobName}}</div>
              </td>
              <!-- Name & HPP -->
              <td class="text-left" colspan="2">
                <div class="box">
                  <div class="content" style="width: 100%">
                    <span style="position:absolute; right:2px;">{{Math.round(combatant.HPPercent)}}%</span>
                    <table class="blue" style="width:100%;">
                      <tr>
                        <td style="text-align: left;">
                          <span class="content" style="text-overflow: ellipsis;">{{combatant.Name}}</span>
                        </td>
                        <td style="min-width: 36px"></td>
                      </tr>
                    </table>
                  </div>
                  <div class="gauge {{combatant.hpcolor}}" style="width: {{combatant.HPPercent}}%" />
                </div>
              </td>
            </tr>
          </template>
          <!-- end of Vue Repeat Template -->
        </tbody>
      </table>
      <!-- end of Combatant Table -->

    </div>
    <!-- end of inner -->
  </div>
  <!-- end of outer -->

  <script src="js/vue-0.12.7.min.js"></script>
  <script src="js/aggrolist.js"></script>
  <!-- Demo Use -->
  <!--
  <script src="js/demodata.js"></script>
  <script>Demo(aggrolist);</script>
  -->
</body>

</html>